<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head>
    <meta charset="UTF-8">
    <link href="../static/css/todostyle.css" rel="stylesheet" th:href="@{/css/todostyle.css}"/>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/bootstrap-treetable/bootstrap-treetable.css}"/>
    <link rel="stylesheet"
          th:href="@{/ajax/libs/bootstrap-table/extensions/columns/bootstrap-table-fixed-columns.css}"/>
    <link rel="stylesheet" th:href="@{/css/animate.css}"/>
    <link rel="stylesheet" th:href="@{/css/style.css}"/>
    <link rel="stylesheet" th:href="@{/ajax/libs/select/select2.css}"/>
    <link rel="stylesheet" th:href="@{/ruoyi/css/ry-ui.css}"/>
    <link rel="stylesheet" th:href="@{/css/table_thead.css}"/>
</head>
<body class="white-bg">

<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-zhibiao">
        <input id="tableId" name="tableId" th:value="${id}" type="hidden">
        <input id="id" name="id" th:value="${id}" type="hidden">
        <input id="projectId" name="projectId" th:value="${projectId}">
        <input class="form-control" id="type" th:value="${type}"/>


        <div class="tableArea hidden" id="tableDiv">
            <h4 class="form-header h4">表格信息</h4>
            <a class="btn btn-success" id="appealEdRes" onclick="appealEdRes()"
               style="margin-bottom: 5px;display:none;">提交</a>
            <table class="table table-striped" id="table"
                   style="min-width:1700px;text-align:center;table-layout:fixed;word-break:break-all;">
                <!--在此处填充表格数据-->
            </table>
        </div>
    </form>
    <div class="row">
        <div class="tableArea hidden col-sm-12 m" id="tableDiv2">
            <h4 class="form-header h4">评分信息</h4>
            <h3 id="indName" style="color: red;"></h3>
            <table class="table table-striped" id="bootstrap-table">
                <!--在此处填充表格数据-->
            </table>
            <!-- 此表格只为导出数据 -->
            <table data-mobile-responsive="true" id="table2" style="display: none">
                <!-- 在此处填充表格数据 -->
            </table>
        </div>
    </div>

    <!-- 循环出历史意见 -->
    <!--<div class="row">
        <div class="col-sm-12 m historytable">
            <h4 class="form-header h4">制表历史信息</h4>
            <table class="table table-striped" style="table-layout:fixed;min-width:1560px;">
            <thead>
                <tr>
                    <th class="col-sm-1">序号</th>
                    <th class="col-sm-1">工号</th>
                    <th class="col-sm-2">参评人角色</th>
                    <th class="col-sm-5">意见</th>
                    <th class="col-sm-3">时间</th>
                </tr>
            </thead>
                <tr th:each="approveResult:${approveResults}"  th:if = "${approveResult.resultType eq '1'} ">
                    <td th:text="${approveResult.appresorder}"></td>
                    <td th:text="${approveResult.userCode}"></td>
                    <td th:text="${approveResult.roleName}"></td>
                    <td th:text="${approveResult.remark}"></td>
                    <td th:text="${#dates.format(approveResult.createDate, 'yyyy-MM-dd')}"></td>
                </tr>
            </table>
        </div>
    </div>-->

    <!--
            <div class="row">
                <div class="col-sm-12 m">
                    <h4 class="form-header h4">评分历史信息</h4>
                    <table class="table table-striped">
                        <tr>
                            <th class="col-sm-1">序号</th>
                            <th class="col-sm-1">工号</th>
                            <th class="col-sm-2">参评人角色</th>
                            <th class="col-sm-5">意见</th>
                            <th class="col-sm-3">时间</th>
                        </tr>
                        <tr th:each="approveResult:${approveResults}" th:if = "${approveResult.resultType eq 'KPLC'} ">
                            <td th:text="${approveResult.appresorder}"></td>
                            <td th:text="${approveResult.userCode}"></td>
                            <td th:text="${approveResult.roleName}"></td>
                            <td th:text="${approveResult.remark}"></td>
                            <td th:text="${#dates.format(approveResult.createDate, 'yyyy-MM-dd')}"></td>
                        </tr>
                    </table>
                </div>
            </div>-->
</div>
<!-- <div class="row">
    <div class="col-sm-offset-5 col-sm-10">
        <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div> -->
<div th:include="include::footer"></div>

<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/export.js}"></script>
<script th:src="@{/ajax/libs/bootstrap-table/extensions/export/xlsx.full.min.js}"></script>
<script th:src="@{/ajax/libs/table2excel/jquery.table2excel.js}"></script>

<script th:src="@{/ajax/libs//datapicker/bootstrap-datetimepicker.min.js}"></script>
<script th:src="@{/ajax/libs/select/select2.js}"></script>
<script charset="gb2312" th:src="@{/js/rule.js}" type="text/javascript"></script>
<!-- jquery-validate 表单验证插件 -->
<script th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
<script th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
<script th:src="@{/ajax/libs/validate/jquery.validate.extend.js}"></script>
<script th:inline="javascript" type="text/javascript">
    var prefix = ctx + "zzjx/pefassproject";
    $(function () {
        doChange(); //初始化表格信息
        exportDataFrame();
    })

    function loadMsg() {
        var appealRelationList = [[${appealRelationList}]];
        console.log(appealRelationList);
        var tableData = $("#table").bootstrapTable('getData');
        console.log(tableData);
        if (tableData.length > 0 && tableData instanceof Array) {
            for (var i = 0; i < tableData.length; i++) {
                $('#table [data-uniqueid=' + tableData[i].id + '] input[type="text"]').attr('disabled', true);
                $('#table [data-uniqueid=' + tableData[i].id + '] input[type="radio"]').attr('disabled', true);
                $('#table [data-uniqueid=' + tableData[i].id + '] textarea').attr('disabled', true);
                $('#table [data-uniqueid=' + tableData[i].id + '] select').attr('disabled', true);
                if (appealRelationList instanceof Array && appealRelationList.length > 0) {
                    for (var j = 0; j < appealRelationList.length; j++) {
                        if (tableData[i].id == appealRelationList[j].pefprojeindicator) {
                            $("#table [data-uniqueid=" + appealRelationList[j].pefprojeindicator + "]").css("background", "#FFD700");
                            $('#table [data-uniqueid=' + appealRelationList[j].pefprojeindicator + '] input[type="text"]').attr('disabled', false);
                            $('#table [data-uniqueid=' + appealRelationList[j].pefprojeindicator + '] input[type="radio"]').attr('disabled', false);
                            $('#table [data-uniqueid=' + appealRelationList[j].pefprojeindicator + '] textarea').attr('disabled', false);
                            $('#table [data-uniqueid=' + appealRelationList[j].pefprojeindicator + '] select').attr('disabled', false);
                        }
                    }
                }
            }
        }
        if (appealRelationList instanceof Array && appealRelationList.length > 0) {
            $("#appealEdRes").css("display", "inline-block");
            $.modal.msg("此表单有申诉信息！已标明黄色提示！可进行编辑提交！");
        }
    }

    function appealEdRes() {
        var tableData = $("#table").bootstrapTable('getData');
        console.log(tableData);

        $.ajax({
            url: ctx + "zzjx/pefprojeindicator/editRes"
            , data: {"tableDataJson": JSON.stringify(tableData)}
            , dataType: "JSON"
            , type: "GET"
            , async: false
            , success: function (result) {
                console.log(result);
                $.modal.msgSuccess(result.msg);
                $.modal.closeLoading();
            }, error: function () {
                $.modal.closeLoading();
                $.modal.alertError("提交失败!");
            }
        })
    }

    /**
     * 更改模板，重新加载预览信息
     * @returns {boolean}
     */
    function doChange() {
        var tableId = $("#tableId").val(); //表单id
        var type = $("#type").val(); //表单id
        var pefassprojectId = $("#projectId").val(); //表单id
        if (tableId != "") {
            $.ajax({
                url: ctx + "zzjx/pefctasstable/previewAll"
                , data: {"tableId": tableId, "type": type, "pefassprojectId": pefassprojectId}
                , dataType: "JSON"
                , type: "GET"
                , async: false
                , success: function (result) {
                    $("#table").html("");
                    var dictData = result.dictData;
                    var list = result.list;
                    //buildTable($('#table'),dictData.length,list.length,dictData,list);
                    //构建第二个table只为导出数据使用
                    buildTable2($('#table2'), dictData.length, list.length, dictData, list);

                    $.modal.closeLoading();
                }, error: function () {
                    $.modal.closeLoading();
                    $.modal.alertError("获取预览信息失败!");
                }
            })
            $("#tableDiv").removeClass("hidden");
            return false;
        }
        $("#tableDiv").addClass("hidden");
    }


    /**
     * 构建预览信息表格
     * @param $el
     * @param cells
     * @param rows
     * @param dictData
     * @param peftempletindicatorList
     */
    function buildTable($el, cells, rows, dictData, peftempletindicatorList) {
        var i, j, row,
            columns = [],
            data = [];
        columns.push({
            field: "id",
            title: "ID",
            visible: false
        })
        //拼接table,拼接表头
        for (var dd in dictData) {
            var dictLabel = dictData[dd]["dictLabel"];//显示名称
            var dictValue = dictData[dd]["dictValue"];//字段值
            var listClass = dictData[dd]["listClass"];//列显示类型(输入框，下拉框，显示)
            var isMustFill = dictData[dd]["isMustFill"];//是否为空
            console.log("listClass---" + listClass);
            var f = {
                field: dictValue,
                title: dictLabel,
                align: "center"
            }
            var opt = {
                dictLabel: dictLabel,	//必填
                dictValue: dictValue,	//必填
                tableId: "table",		//必填
                ruleId: listClass,		//必填
                isMustFill: isMustFill,	//必填
                align: "center",
                halign: "center",
                formId: "formTable",		//必填
            };
            f = $.rule.fmRule(opt);
            columns.push(f);
        }

        //拼接数据
        /*for (var i in peftempletindicatorList) {
            row = {};
            for(var dd in dictData){
                var dictValue = dictData[dd]["dictValue"];//字段值
                for(var key in peftempletindicatorList[i]){    //map key 
                    //console.log(key);
                    //console.log(peftempletindicatorList[i][key]);  //map value
                    if(key == dictValue){
                        if (dictValue == "checkcyc"){
                            row[key] = $.table.selectDictLabel([[${@dict.getType('zzjx_pefindicator_checkcyc')}]], peftempletindicatorList[i][key]);
                        }else{
                            row[key] = peftempletindicatorList[i][key];
                        }
                    }
                }
            }
            data.push(row);
        }*/

        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: peftempletindicatorList,
            uniqueId: "id",
            search: false,
            onClickRow: function (row, $element) {
                /*loadKpxx(row);*/
            }
        });
        loadMsg();
    }

    /**
     * 点击指标加载考评详细
     */
    function loadKpxx(row) {
        var id = row.id;
        $.modal.loading("请等待加载此指标的考评信息!");
        $.ajax({
            url: ctx + "zzjx/assessor/selectAssessorByIndId/" + id
            , dataType: "JSON"
            , type: "GET"
            , async: false
            , success: function (result) {
                $("#bootstrap-table").html("");
                buildTable2(result);
                $.modal.closeLoading();
            }, error: function () {
                $.modal.closeLoading();
                $.modal.alertError("获取考评信息失败!");
            }
        })
        $("#tableDiv2").removeClass("hidden");
        $("#indName").html("&nbsp;&nbsp;&nbsp;&nbsp;" + row.indName);
    }

    /**
     * 构建预览信息表格 --构建此表格只为导出数据
     *
     */
    function buildTable2($el, cells, rows, dictData, list) {
        var i, j, row, columns = [], data = [];
        columns.push({
            field: "id",
            title: "ID",
            visible: false
        })
        //拼接table,拼接表头
        for (var dd in dictData) {
            var dictLabel = dictData[dd]["dictLabel"];//显示名称
            var dictValue = dictData[dd]["dictValue"];//字段值
            var f = {
                field: dictValue,
                title: dictLabel,
                sortable: false
            }
            columns.push(f);
        }
        //拼接评分和评语
        /*columns.push(
            {
                field: "score",
                title: "评分"

            },
            {
                field: "comments",
                title: "评语"
            });
*/
        //拼接数据
        /*for (var i in list) {
            row = {};
            for(var dd in dictData){
                var dictValue = dictData[dd]["dictValue"];//字段值
                for(var key in list[i]){    //map key 
                    if(key == dictValue){
                        row[key] = list[i][key];
                    }
                }
            }
            data.push(row);
        }*/


        $el.bootstrapTable('destroy').bootstrapTable({
            columns: columns,
            data: list,
            search: false,
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            showExport: false,                     //是否显示导出
            exportDataType: "basic",              //basic', 'all', 'selected'.

            pagination: false,
            modalName: "考核指标"
        });

    }

    //表格超出宽度鼠标悬停显示td内容
    function paramsMatter(value, row, index) {
        var span = document.createElement('span');
        if (value == undefined) {
            value = "-";
        }
        span.setAttribute('title', value);
        span.innerHTML = value;
        return span.outerHTML;
    }


    function exportDataFrame() {

        var nodeListOf = document.querySelector("#table2");
        var sheet = XLSX.utils.table_to_sheet(nodeListOf);//将一个table对象转换成一个sheet对象
        //openDownloadDialog(sheet2blob(sheet),'指标信息.xlsx');

        var filename = "考核指标.xlsx"; //文件名称
        var ws_name = "Sheet1"; //Excel第一个sheet的名称
        var wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, sheet, ws_name);  //将数据添加到工作薄
        XLSX.writeFile(wb, filename); //导出Excel

    }

    //td宽度以及内容超过宽度隐藏
    function formatTableUnit(value, row, index) {
        return {
            css: {
                "white-space": 'nowrap',
                "text-overflow": 'ellipsis',
                "overflow": 'hidden'
            }
        }
    }
</script>
</body>
</html>
